<template>
    <div class="search-bar">
      <input
        type="text"
        placeholder="请输入关键词"
        class="search-input"
        v-model="searchQuery"
        @keyup.enter="performSearch"
      />
      <button class="search-button" @click="performSearch">
        <i class="icon-search"></i>
      </button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  const searchQuery = ref('');
  
  const performSearch = () => {
    if (searchQuery.value.trim()) {
      router.push({ path: '/search', query: { q: searchQuery.value } });
      searchQuery.value = '';
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .search-bar {
    display: flex;
    align-items: center;
    background: rgba(var(--surface-rgb), 0.8);
    border-radius: 20px;
    padding: 5px 10px;
    border: 1px solid rgba(var(--border-color-rgb), 0.2);
    transition: all 0.3s ease;
    
    &:focus-within {
      border-color: $primary;
      box-shadow: 0 0 0 2px rgba($primary, 0.2);
    }
  }
  
  .search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 5px 10px;
    color: var(--text-primary);
    outline: none;
    font-size: 0.9rem;
    
    &::placeholder {
      color: var(--text-tertiary);
    }
  }
  
  .search-button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:hover {
      color: $primary;
    }
  }
  
  @media (max-width: 768px) {
    .search-bar {
      width: 100%;
      margin: 10px 0;
    }
  }
  </style>